<%@ page import="pojo.User" %><%--
  Created by IntelliJ IDEA.
  User: konley
  Date: 2020/6/17
  Time: 19:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/mistore.css"/>
    <script src="${pageContext.request.contextPath }/js/jquery-3.4.1.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.css"/>
    <script src="${pageContext.request.contextPath }/js/mistore.js" type="text/javascript" charset="utf-8"></script>
    <title>小米商城 - 主页</title>
    <style>
        body {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<!--top-->
<div id="navi">
    <div style="background-color:#333333;" id="nav">
        <div class="container" style="height: 40px">
            <div class="row">
                <div class="col-sm-8" style="margin-top: 9px">
                    <ul class="top-nav" style="float: left">
                        <li><a href="#">小米商城</a></li>
                        <li>|</li>
                        <li><a href="#">MIUI</a></li>
                        <li>|</li>
                        <li><a href="#">IoT</a></li>
                        <li>|</li>
                        <li><a href="#">云服务</a></li>
                        <li>|</li>
                        <li><a href="#">小爱开放平台</a></li>
                        <li>|</li>
                        <li><a href="#">企业团购</a></li>
                        <li>|</li>
                        <li><a href="#">资质证照</a></li>
                        <li>|</li>
                        <li><a href="#">规则协议</a></li>
                        <li>|</li>
                        <li><a href="#">下载app</a></li>
                        <li>|</li>
                        <li><a href="#">Select Location</a></li>
                    </ul>
                </div>
                <% User user = (User)session.getAttribute("user");%>
                <div class="col-sm-4" style="margin-top: 9px">
                    <ul class="top-nav" style="float: left">
                        <li style="color: #ec971f">欢迎您，<%=user.getName()%></li>
                        <li>|</li>
                        <li><a href="register.jsp">注册</a></li>
                        <li>|</li>
                        <li><a href="admin.jsp">后台</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<br><br><br><br><br>
<!--主体-->
<div class="container">
    <!--第二行-->
    <div class="row">
        <div class="col-sm-1">
            <img width="100%" src="photo/milogo.jpg">
        </div>
        <div class="col-sm-11 wrap">
            <ul>
                <li>
                    <a href="#">小米手机</a>
                    <ul class="ul">
                        <li>小米10 青春版 5G</li>
                        <li>小米10 PRO</li>
                        <li>小米10</li>
                    </ul>
                </li>
                <li>
                    <a href="#">Redmi 红米</a>
                    <ul>
                        <li>Ridmi 10x 4G</li>
                        <li>Redmi 10X 5G</li>
                        <li>Redmi K30 Pro</li>
                    </ul>
                </li>
                <li>
                    <a href="#">电视</a>
                    <ul>
                        <li>Redmi MAX 98"</li>
                        <li>Redmi电视 X55</li>
                        <li>Redmi电视 R70A</li>
                    </ul>
                </li>
                <li>
                    <a href="#">笔记本</a>
                    <ul>
                        <li>RedmiBook 16</li>
                        <li>RedmiBook 14</li>
                        <li>RedmiBook 13</li>
                    </ul>
                </li>
                <li>
                    <a href="#">家电</a>
                    <ul>
                        <li>米家互联网空调C1</li>
                        <li>米家互联网空调</li>
                        <li>Redmi全自动洗衣机1A</li>
                    </ul>
                </li>
                <li>
                    <a href="#">路由器</a>
                    <ul>
                        <li>Redmi路由器 AX5</li>
                        <li>小米路由器 AX1800</li>
                        <li>小米AIoT路由器AX3600</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <!--轮播图-->
    <div class="row">
        <div class="col-sm-12 text-center">
            <div class="slider" style="width: 100%">
                <ul style="list-style-type: none; width: 100%">
                    <li><a href="#"><img src="photo/lunbo2.jpg" width="100%"></a></li>
                    <li><a href="#"><img src="photo/lunbo3.jpg" width="100%"></a></li>
                    <li><a href="#"><img src="photo/lunbo4.jpg" width="100%"></a></li>
                    <li><a href="#"><img src="photo/lunbo5.jpg" width="100%"></a></li>
                </ul>
                <!--箭头-->
                <div class="arrow">
                    <span class="arrow-left">&lt;</span>
                    <span class="arrow-right">&gt;</span>
                </div>
            </div>
        </div>
    </div>
    <!--三个小方块-->
    <div class="row">
        <div class="col-sm-12">
            <img src="photo/bn1.jpg" height="162">
            <img src="photo/bn2.jpg" height="162">
            <img src="photo/bn3.jpg" height="162">
            <img src="photo/bn4.jpg" height="162" style="padding-right: 0;margin-right: 0">
        </div>
    </div>
    <!--长条1-->
    <div class="row">
        <div class="col-sm-12">
            <br>
            <img src="photo/b1.jpg" width="100%">
        </div>
    </div>
    <br>
    <!--手机模块-->
    <div class="row">
        <div class="col-sm-10">
            <h3>手机</h3>
        </div>
        <div class="col-sm-2 " style="text-align: left">
            <h4 style="margin-top: 20px;margin-left: 70px;color: #ec971f">查看全部</h4>
        </div>
        <div class="col-sm-3">
            <img src="photo/sjlong.jpg" width="100%">
        </div>
        <div class="col-sm-9">
            <div class="row" style="width: 102%">
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj1.jpg" width="100%">
                    <p style="font-weight: bold">小米10 青春版5G</p>
                    <p style="color:#999">50倍潜望式变焦 / 轻薄5G手机</p>
                    <br>
                    <p style="color:#fe7c5d">2099元起</p><br>
                </div>
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj2.jpg" width="100%">
                    <p style="font-weight: bold">小米10</p>
                    <p style="color:#999">骁龙865/1亿像素相机</p><br>
                    <p style="color:#fe7c5d">3799元起</p><br>
                </div>
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj3.jpg" width="100%">
                    <p style="font-weight: bold">Redmi K30 Pro</p>
                    <p style="color:#999">双模5G/骁龙865/弹出全面屏</p><br>
                    <p style="color:#fe7c5d">2397元起</p><br>
                </div>
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj4.jpg" width="100%">
                    <p style="font-weight: bold">Redmi K30 Pro 变焦版</p>
                    <p style="color:#999">双模5G/骁龙865/弹出全面屏</p>
                    <br>
                    <p style="color:#fe7c5d">3799元</p>
                    <br>
                </div>
            </div>
            <div class="row" style="width: 102%;margin-top: 15px">
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj5.jpg" width="100%">
                    <p style="font-weight: bold">小米10 Pro</p>
                    <p style="color:#999">骁龙865 / 50倍变焦</p>
                    <br>
                    <p style="color:#fe7c5d">4999元起</p><br>
                </div>
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj6.jpg" width="100%">
                    <p style="font-weight: bold">Redmi K30</p>
                    <p style="color:#999">120Hz流速屏，全速热爱</p><br>
                    <p style="color:#fe7c5d">1399元起</p><br>
                </div>
                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj7.jpg" width="100%">
                    <p style="font-weight: bold">Redmi K30 5G</p>
                    <p style="color:#999">双模5G，120Hz流速屏</p><br>
                    <p style="color:#fe7c5d">1899元起</p><br>
                </div>

                <div class="col-sm-3 text-center" style="background-color:#fff;"><br>
                    <img src="photo/sj1.jpg" width="100%">
                    <p style="font-weight: bold">Redmi 8</p>
                    <p style="color:#999">5000mAh超长续航</p>
                    <br>
                    <p style="color:#fe7c5d">799元</p><br>
                </div>
            </div>
        </div>
    </div>

    <!--长条2-->
    <div class="row">
        <div class="col-sm-12">
            <br>
            <img src="photo/b2.jpg" width="100%">
        </div>
    </div>
    <br>
    <!--家电模块-->
    <div class="row">
        <div class="col-sm-10">
            <h3>家电</h3>
        </div>
        <div class="col-sm-2 " style="text-align: left">
            <h4 style="margin-top: 20px;margin-left: 70px;color: #ec971f">查看全部</h4>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row" style="width: 100%;margin-left: 0px">
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds2.jpg">
            <p style="font-weight: bold">Redmi 红米电视 70英寸</p>
            <p style="color:#999">70英寸震撼巨屏，4K画质，细腻如真</p><br>
            <p style="color:#fe7c5d">1899元起</p><br>
        </div>
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds3.jpg">
            <p style="font-weight: bold">小米全面屏电视E32C</p>
            <p style="color:#999">全面屏设计，人工智能系统</p><br>
            <p style="color:#fe7c5d">899元起</p><br>
        </div>
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds4.jpg">
            <p style="font-weight: bold">小米全面屏电视E55A</p>
            <p style="color:#999">全面屏设计，人工智能语音</p><br>
            <p style="color:#fe7c5d">1599元</p><br>
        </div>
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds2.jpg">
            <p style="font-weight: bold">米家空调</p>
            <p style="color:#999">出众静音，快速制冷热</p><br>
            <p style="color:#fe7c5d">1499元</p><br>
        </div>
    </div>
    <br>
    <div class="row" style="width: 100%;margin-left: 0px">
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds7.jpg">
            <p style="font-weight: bold">米家互联网洗烘一体机 Pro 10kg</p>
            <p style="color:#999">智能洗烘，省心省力</p><br>
            <p style="color:#fe7c5d">2999元</p><br>
        </div>
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds8.jpg">
            <p style="font-weight: bold">Redmi全自动波轮洗衣机1A 8kg</p>
            <p style="color:#999">一键操作，父母都爱用</p><br>
            <p style="color:#fe7c5d">779元</p><br>
        </div>
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds9.jpg">
            <p style="font-weight: bold">15.6" 四核i7 16G 独显 512G</p>
            <p style="color:#999">全面均衡的国民轻薄本</p><br>
            <p style="color:#fe7c5d">4699元</p><br>
        </div>
        <div class="col-sm-3 text-center" style="background-color:#fff;">
            <img src="photo/ds10.jpg">
            <p style="font-weight: bold">小爱音箱万能遥控版</p>
            <p style="color:#999">传统家电秒变智能</p><br>
            <p style="color:#fe7c5d">149元</p><br>
        </div>
    </div>
    <!--底栏-->
    <div class="row" style="margin-top: 20px">
        <div class="col-sm-12 text-center" style="margin-top: 150px" >
            <p>简体  |   繁体   |   Englis  |   常见问题  |   隐私政策</p>
            <p>小米公司版权所有  -京ICP备10046444  -京公网安备11010802020134号  -京ICP证110507号</p>
        </div>
    </div>
</div>
</div>
</div>
<div>
    <img href="javascript:;" id="btn" title="回到顶部"style="width:50px;
         height:50px; position:fixed; right:50px; bottom:10px;
         " src="photo/backtop.jpg">;
</div>
</body>
</html>
